<template>
  <div class="newgroup">
    <div class="addhead">
      <van-icon
        name="arrow-left"
        @click="
          () => {
            this.$router.go(-1);
          }
        "
      />
      <li>新建团购</li>
      <span></span>
    </div>
    <div class="addmain">
      <van-uploader multiple v-model="fileList">
        <li>+</li>
        <li>添加封面图</li>
      </van-uploader>
      <li>
        <input type="text" placeholder="请输入团购标题" v-model="title" />
      </li>
      <li>
        <input type="text" placeholder="请输入楼盘地址" v-model="address" />
      </li>
      <li>
        <input type="text" placeholder="选择开始日期" v-model="time" /><van-icon
          name="arrow"
        />
      </li>
      <li>
        <input type="text" placeholder="请输入报名人数" v-model="peopleNum" />
      </li>
      <van-field
        v-model="teamcontext"
        rows="2"
        autosize
        type="textarea"
        placeholder="请输入团购介绍"
        show-word-limit
      />
    </div>
    <div class="addfoot">
      <button @click="addGroup">创建团购</button>
    </div>
  </div>
</template>

<script>
import axios from "../../util/axios";
export default {
  data() {
    return {
      fileList: [],
      date: "",
      show: false,
      title: "",
      address: "",
      time: "",
      peopleNum: "",
      teamcontext: "",
    };
  },
  methods: {
    addGroup() {
      axios
        .post("/addTeamBuy", {
          img: "https://unsplash.it/400/800/?许娜",
          title: this.title,
          address: this.address,
          time: this.time,
          peopleNum: this.peopleNum,
          state: "关闭",
          teamcontext: this.teamcontext,
          userImg: "https://unsplash.it/400/800/?许娜",
          name: "崔吉吉",
          phone: "16789074567",
        })
        .then((res) => {
          console.log(res);
        });
      this.$router.push("/group");
    },
  },
};
</script>

<style lang="scss">
.newgroup {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.addhead {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: cornflowerblue;
  color: #fff;
  font-size: 18px;
}
.addmain {
  width: 100%;
  flex: 1;
  padding: 10px 15px;
  .van-uploader {
    width: 100%;
    height: 150px;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .van-uploader__wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      .van-uploader__input-wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        li {
          font-size: 18px;
        }
      }
      .van-uploader__preview {
        z-index: 1;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        .van-image {
          width: 100%;
          height: 100%;
          img {
            width: 100%;
            height: 150px;
          }
        }
      }
    }
  }
  > li {
    width: 100%;
    height: 40px;
    border: 1px solid #ccc;
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    input {
      border: none;
    }
  }
  .van-field {
    height: 150px;
    border: 1px solid #ccc;
  }
}
.addfoot {
  width: 100%;
  height: 50px;
  button {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: cornflowerblue;
    color: #fff;
  }
}
</style>